import React from 'react';
import { Button, Input, Form, NavBar, Card } from 'react-vant';
import { spriteArry, goods } from '@/utils/noTrueData';
import { history } from 'umi';
import { connect } from 'umi';
export default connect(({ index }) => ({ account: index.account }))((props) => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    //redux存储
    props.dispatch({ type: 'index/saveAccount', payload: values });
    props.dispatch({ type: 'index/saveSpriteArry', payload: spriteArry() });
    props.dispatch({ type: 'index/saveGoods', payload: goods() });
    localStorage.setItem('account', values);
    history.push('/');

    setTimeout(() => {
      // console.log('props', props);
    }, 2000);
  };
  return (
    <>
      <NavBar title="用户注册" />
      <Card round>
        <Card.Header>用户注册</Card.Header>
        <Card.Body>
          <Form
            form={form}
            onFinish={onFinish}
            footer={
              <div style={{ margin: '16px 16px 0' }}>
                <Button round nativeType="submit" type="primary" block>
                  提交
                </Button>
              </div>
            }
          >
            <Form.Item
              tooltip={{
                message:
                  'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
              }}
              intro="确保这是唯一的用户名"
              rules={[{ required: true, message: '请填写您的用户名' }]}
              name="username"
              label="用户名"
            >
              <Input placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item
              rules={[{ required: true, message: '请填写密码' }]}
              name="password"
              label="密码"
            >
              <Input placeholder="请输入密码" />
            </Form.Item>
          </Form>
        </Card.Body>
      </Card>
    </>
  );
});
